<template>
  <el-form class="wb-animate">
    <dropdown-normal v-model="animate.triggerType" :valLists="ANIMATE_TRIGGER_TYPE" label="动画触发类型" @change="onUpdateAnimateAttr"></dropdown-normal>
    <switch-normal v-model="animate.isGsap" label="开启高级动画" @change="onAddGsapAnimateAttr"></switch-normal>
    <template v-if="animate.isGsap">
      <switch-normal v-model="animate.isPathAnimate" label="路径动画" @change="onUpdateIsPathAnimateAttr"></switch-normal>
      <template v-if="animate.isPathAnimate && animate.path">
        <switch-normal label="贝兹曲线" v-model="animate.path.isPathBezier" @change="onUpdatePathAnimateAttr"></switch-normal>
        <template v-if="animate.path.isPathBezier">
          <dropdown-normal v-model="animate.path.type" :valLists="ANIMATE_BEZIER_TYPE" label="贝兹曲线类型" @change="onUpdatePathAnimateAttr"></dropdown-normal>
          <switch-normal label="自动贴合路径旋转" v-model="animate.path.autoRotate" @change="onUpdatePathAnimateAttr"></switch-normal>
        </template>
        <textarea-normal label="关键节点" v-model="animate.path.attrs" placeholder='[{"x":-836,"y":-220,"opacity":1}]' @change="onUpdatePathAnimateAttr"></textarea-normal>
        <input-normal label="控制点曲度" placeholder="弯曲程度，绘制曲线经过点数量" v-model="animate.path.curviness" @change="onUpdatePathAnimateAttr"></input-normal>
      </template>
      <textarea-normal label="缓动参数" v-model="animate.gsap.options" placeholder='{"x":-836,"y":-220,"opacity":1,"rotate":60}' @change="onUpdateGsapAttr"></textarea-normal>
      <template v-if="animate.gsap.options.indexOf('keyframes') == -1">
        <input-normal label="缓动时间" placeholder="关键路径时间用，分隔" v-model="animate.gsap.durations" @change="onUpdateGsapAttr"></input-normal>
        <slider-normal label="重复次数" v-model="animate.gsap.repeat" :min="-1" :max="100" :step="1" @change="onUpdateGsapAttr"></slider-normal>
        <dropdown-normal label="缓动类型" :valLists="GSAP_EASE_TYPES" v-model="animate.gsap.ease" @change="onUpdateGsapAttr"></dropdown-normal>
        <dropdown-normal label="缓动出入" :valLists="GSAP_EASE_INOUT_TYPES" v-model="animate.gsap.easeInOut" @change="onUpdateGsapAttr"></dropdown-normal>
        <switch-normal label="yoyo" v-model="animate.gsap.yoyo" @change="onUpdateGsapAttr"></switch-normal>
        <switch-normal label="缓动结束后执行事件" v-model="animate.gsap.isOnComplete" @change="onUpdateGsapAttr"></switch-normal>
        <textarea-normal v-if="animate.gsap.isOnComplete" label="事件参数" v-model="animate.gsap.onCompleteParams" @change="onUpdateGsapAttr"></textarea-normal>
      </template>
    </template>
    <el-row class="margin-left-right-16">
      <el-button  icon="Plus" type="primary" @click.stop="onAddAnimate">添加动画</el-button>
      <el-button icon="CaretRight" @click.stop="onPlayAll">预览动画</el-button>
    </el-row>
    <el-collapse v-model="activeNames" class="margin-top-10">
      <el-collapse-item v-for="(item, index) in animates" :name="index+1" :key="item.name + '-' + index">
          <template #title>
          动画{{index+1}}<span class="select-animate" @click.stop="onShowSelectAnimate($event, index)">{{item.name}}</span>
          <i class="jy-icon-play margin-left-right-16 margin-left-right-16" @click.stop="onPlayAnimateByIndex($event, index)"></i>
          <i class="jy-icon-delete" @click.stop="onDeleteAnimateByIndex($event, index)"></i>
        </template>
        <slider-normal v-model="item.duration" label="时长" :min="0" :max="10" :step="0.1" @change="onUpdateAnimateByIndex($event,index)"></slider-normal>
        <slider-normal v-model="item.delay" label="延时" :min="0" :max="10" :step="0.1" @change="onUpdateAnimateByIndex($event, index)"></slider-normal>
        <slider-normal v-model="item.repeat" label="重复次数" :min="0" :max="99" :step="1" @change="onUpdateAnimateByIndex($event, index)"></slider-normal>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>


<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'
import { ANIMATE_TRIGGER_TYPE, ANIMATE_BEZIER_TYPE, GSAP_EASE_TYPES, GSAP_EASE_INOUT_TYPES } from '@/const/'
import { PathAnimate } from '@/store/models/component-default-data'
import { EventBus } from '@/utils/'

const activeNames = [1]
const useWebComponent = useWebComponentStore()

let animate_: any
const animate = computed(() => {
  animate_ = useWebComponent.currentComponentData!.animate
  return animate_
})

const animates = computed(() => {
  return useWebComponent.currentComponentData!.animate.animates
})

const onUpdateAnimateAttr = () => {
  useWebComponent.updateAnimateAttr( { triggerType: animate_.triggerType } )
}
const onAddGsapAnimateAttr = () => {
  useWebComponent.updateAnimateAttr( { isGsap: animate_.isGsap } )
  if(animate_.isGsap) {
    const gsapPathAnimate = _.cloneDeep(PathAnimate)
    useWebComponent.updateAnimateAttr( gsapPathAnimate )
  } else {
    delete animate_.gsap
    delete animate_.path
  }
}
const onUpdateIsPathAnimateAttr = () => {
  useWebComponent.updateAnimateAttr( { isPathAnimate: animate_.isPathAnimate } )
}
const onUpdatePathAnimateAttr = () => {
  useWebComponent.updateAnimateAttr( { path: animate_.path } )
}
const onUpdateGsapAttr = () => {
  useWebComponent.updateAnimateAttr( { gsap: animate_.gsap } )
}
const onAddAnimate = () => {
  const item = { duration: 1, delay: 0, repeat: 1, sequence: 1, opacity: 1, classStr: "flash", name: "闪烁", isPlaying: false }
  useWebComponent.changeSelectAnimatePlane({ isActive: true })
  useWebComponent.updateAnimateAttr({ isPlayAll: false, playAnimateIndex: animate_.animates.length })
  useWebComponent.addAnimate(item)
}
const onDeleteAnimate = (e: any, index: number) => {
  e.stopPropagation()
  e.preventDefault()
  useWebComponent.deleteAnimate(index)
}
const onPlayAll = () => {
  useWebComponent.playAnimateAll(true)
  EventBus.$emit("playAnimate", useWebComponent.currentComponentData!.id)
}
const onShowSelectAnimate = (e: any, index: number) => {
  e.stopPropagation()
  e.preventDefault()
  useWebComponent.changeSelectAnimatePlane({ isActive: true })
  useWebComponent.updateAnimateIndex(index)
}
const onPlayAnimateByIndex = (e: any, index: number) => {
  e.stopPropagation()
  e.preventDefault()
  const item = animate_.animates[index]
  item.isPlaying = true
  const params = { index, item }
  useWebComponent.updateAnimateByIndex(params)
  useWebComponent.updateAnimateIndex(index)
  EventBus.$emit("playAnimate", useWebComponent.currentComponentData!.id)
}
const onDeleteAnimateByIndex = (e: any, index: number) => {
  e.stopPropagation()
  e.preventDefault()
  useWebComponent.deleteAnimate(index)
}
const onUpdateAnimateByIndex = (e: any, index: number) => {
  e.stopPropagation()
  e.preventDefault()
  const item = animate_.animates[index]
  const params = { index, item }
  useWebComponent.updateAnimateByIndex(params)
  useWebComponent.updateAnimateIndex(index)
}
</script>